/*
 * 用户信息显示卡片
 * @Author: ljb
 * @Date: 2018-09-06 11:13:17
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-18 10:03:14
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	.v-component-userInfo-card {
		width: 100%;
		height: 100%;
		overflow: hidden;
		line-height: 1;
		background-color: rgba(245,245,245,1);
		color:rgba(60,73,87,1);
		.userInfo-header {
			position: relative;
			width: 100%;
			height: 300px;
			overflow: hidden;
			&:hover .header-bg {
				transform: scale(1.1);
			}
			/*头部背景图*/
			& > .header-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				transition: transform 0.6s 0s ease;
			}
			/*头部背景图 END*/

			/*用户头像*/
			.user-avatar {
				position: absolute;
				top: 50px;
				left: 0;
				right: 0;
				margin: 0 auto;
				overflow: hidden;
				font-size: 0;
				text-align: center;
				img {
					width: 100px;
					height: 100px;
					border-radius: 50%;
				}
				.username {
					margin: 10px auto 0;
					font-size: 28px;
					color: #fff;
					width: 50%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			/*用户头像 END*/

			/*测肤次数信息*/
			.skin-test-info {
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				width: 100%;
				height: 80px;
				& > div {
					width: 34%;
					height: 80px;
					background: rgba(255,255,255,.3);
					text-align: center;
					color: #fff;
					.skin-test-count {
						line-height: 46px;
						font-size: 22px;
					}
					.skin-test-type {
						font-size: 18px;
					}
				}
			}
			/*测肤次数信息 END*/
		}
		/*用户基本信息*/
		.userInfo-content {
			width: 100%;
			padding-left: 20px;
			box-sizing: border-box;
			h2 {
				margin: 30px 0;
				font-size: 18px;
				font-weight:400;
			}
			ul {
				list-style: none;
				li {
					margin-bottom: 20px;
					span {
						font-size: 16px;
						font-weight:400;
						color:#8B949D;
						&.content-info {
							color: #333;
						}
					}
				}
			}
		}
		/*用户基本信息 END*/

		/*去过的店铺信息*/
		.visited-store {
			width: 100%;
			margin-top: 40px;
			padding-left: 20px;
			.visited-header {
				padding-right: 28px;
				font-size:18px;
				font-weight:400;
				box-sizing: border-box;
				.more {
					line-height: 16px;
					float: right;
					font-size: 14px;
					color:rgba(33,152,253,1);
					cursor: pointer;
					// transition: color .6s 0s ease;
					// &:hover {
					// 	color: rgba(33,120,255,1);
					// }
				}
			}
			.store-lists {
				display: flex;
				margin-top: 26px;
				& > div {
					width: 25%;
					font-size: 14px;
					text-align: center;
					img {
						width: 88px;
						height: 88px;
						border-radius: 50%;
						margin-bottom: 10px;
						background-color: #fff;
					}
					.store-name {
						margin-bottom: 6px;
					}
					.skin-test-count {
						color:#999;
					}
				}
			}
		}
		/*去过的店铺信息 END*/
	}

</style>
<template>
	<div class="v-component-userInfo-card">
		<!-- 用户头部块 -->
		<div class="userInfo-header">
			<img
				:src="header_bg"
				class="header-bg"
				alt="bg">
			<div class="user-avatar">
				<img
					:src="skinDetailData.headimgurl"
					alt="avatar">
				<p class="username">{{ skinDetailData.nickname ? skinDetailData.nickname : ( skinDetailData.name || $t('report_detail.unknown')) }}</p>
			</div>

			<div class="skin-test-info">
				<div>
					<p class="skin-test-count">{{ `${userInfo.all_skin_count ? userInfo.all_skin_count : 0}` + $t('report_detail.count') }}</p>
					<p
						:title="$t('report_detail.test_count_num')"
						class="skin-test-type overflow-ellipsis">{{ $t('report_detail.test_count_num') }}</p>
				</div>
				<div>
					<p class="skin-test-count">{{ `${userInfo.hm_skin_count ? userInfo.hm_skin_count : 0}` + $t('report_detail.count') }}</p>
					<p
						:title="$t('report_detail.touch_test')"
						class="skin-test-type overflow-ellipsis">{{ $t('report_detail.touch_test') }}</p>
				</div>
				<div>
					<p class="skin-test-count">{{ `${userInfo.wax_skin_count ? userInfo.wax_skin_count : 0}` + $t('report_detail.count') }}</p>
					<p
						:title="$t('report_detail.image_test')"
						class="skin-test-type overflow-ellipsis">{{ $t('report_detail.image_test') }}</p>
				</div>
			</div>
		</div>

		<!-- 基本信息 -->
		<div class="userInfo-content">
			<h2>{{ $t('report_detail.basic_info') }}</h2>
			<ul>
				<li>
					<span class="label">{{ $t('report_detail.user_name') }}</span>
					<span class="content-info">{{ skinDetailData.name || $t('report_detail.unknown') }}</span>
				</li>
				<li>
					<span class="label">{{ $t('report_detail.user_gender') }}</span>
					<span class="content-info">{{ showGender(skinDetailData.sex) }}</span>
				</li>
				<li>
					<span class="label">{{ $t('report_detail.user_age') }}</span>
					<span class="content-info">{{ (skinDetailData.age || 0) + $t('report_detail.age_unit') }}</span>
				</li>
				<li>
					<span class="label">{{ $t('report_detail.user_city') }}</span>
					<span class="content-info">{{ skinDetailData.city + skinDetailData.province || $t('report_detail.unknown') }}</span>
				</li>
				<li>
					<span class="label">{{ $t('report_detail.user_tel') }}</span>
					<span class="content-info">{{ skinDetailData.phone || $t('report_detail.unknown') }}</span>
				</li>
			</ul>
		</div>

		<!-- 去过的店铺 -->
		<div
			v-if="goesStore.length > 0"
			class="visited-store">
			<div class="visited-header">
				<span class="visited-title">{{ $t('report_detail.visited_store') }}</span>
				<span
					class="more"
					@click="moreStroes">{{ $t('report_detail.more') + ' >>' }}</span>
			</div>
			<div class="store-lists">
				<div
					v-for="(store,index) in goesStore"
					:key="index">
					<img
						:src="store.store_img"
						alt="storeImage"
						srcset="">
					<p
						:title="store.name"
						class="store-name overflow-ellipsis"
						v-text="store.name"/>
					<p
						:title="store.name"
						class="skin-test-count overflow-ellipsis"
						v-text="$t('report_detail.skin_test_count', { field: store.all_skin_count })"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

export default {
	name: 'UserInfoCard',
	props: {
		userInfo: {
			type: Object,
			default() {
				return {};
			},
		},
		goesStore: {
			type: Array,
			default() {
				return [];
			},
		},
		skinDetailData: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			header_bg: require('src/assets/img/shuju_beijing_img@2x.png'),
		};
	},
	methods: {
		/**
         * 性别展示
         * @param  {string} sex {性别}
         * @return {string} {性别展示}
         */
		showGender(sex) {
			switch (parseInt(sex, 10)) {
			case 1:

				return this.$t('report_detail.male');

			case 2:

				return this.$t('report_detail.female');

			default:

				return this.$t('report_detail.unknown');
			}
		},

		/**
		 * 更多过去店铺
		 * @return {undefined} {description}
		 */
		moreStroes() {
			this.$emit('show-store');
		},
	},
};
</script>
